<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="搜索" :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view class="search-box fboxRow Ycenter">
				<view class="search-inner fboxRow Ycenter">
					<view class="input fboxRow Ycenter flex1">
						<u-icon name="search" size="18"></u-icon>
						<template v-if="step == 0 || step == 1">
							<input class="uni-input flex1" type="text" v-model="keywords" confirm-type="search" placeholder="搜索职位名称、公司" 
							placeholder-style="color:#6B707C;font-size: 26rpx" @input="keySearch" @confirm="keySearch" />
							<u-icon v-if="keywords" @click="delSearch" name="close-circle" size="16"></u-icon>
						</template>
						<template  v-if="step == 2">
							<view class="fboxRow Ycenter search-tag font26 flex1">
								<view class="flex1" @click="searchChange">{{keywords}}<text class="ml10" v-for="(item) in searchTypes" :key="item">{{item == 2 ? '公司' : '职位'}}</text></view>
								<u-icon class="ml10" v-if="keywords" @click="delSearch" name="close-circle" size="16"></u-icon>
							</view>
						</template>
					</view>
					<view class="btn fboxRow Ycenter Xcenter font26" @click="keyEnterSearch(keywords)">搜索</view>
				</view>
			</view>
			<scroll-view  class="card-scroll" :scroll-top="scrollTop" scroll-y="true" 
			@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" :style="{height: scrollHeight +'px'}">
				<view class="list-history" v-if="step == 0">
					<view class="tit fboxRow Ycenter" v-if="listHistory.length">
						<view class="flex1 font30 lh44 color-E8CDA7">历史搜索</view>
						<view class="color-6B707C font26 lh38"  @click="setHistory('del')">清除历史</view>
					</view>
					<view class="mt16">
						<Tags :isBorder="true" :list="listHistory" @click="tagClick" />
					</view>
				</view>
				<template v-else-if="step == 1">
					<view class="list-key" v-if="listKey.length">
						<view class="item fboxRow Ycenter" v-for="(item, index) in listKey" :key="index" @click="keyEnterSearch(item)">
							<u-icon name="search" size="18"></u-icon>
							<view class="tit font30 color-ACB4C7" v-html="item.searchTxt"></view>
							<view class="label font22 fboxRow Ycenter Xcenter" v-if="item.searchTypes.includes(1)">职位</view>
							<view class="label font22 fboxRow Ycenter Xcenter" v-if="item.searchTypes.includes(2)">公司</view>
						</view>
					</view>
					<template v-if="listConfig.loading == 'list-not'">
						<NotEmpty text="未搜索到相关数据" :height="scrollHeight" />
					</template>
				</template>
				<template v-else>
					<view class="list mt32" v-if="listKey.length">
						<view v-for="(item, index) in listData" :key="index">
							<template v-if="actionIndex == 2">
								<view class="company-item fboxRow" @click="goApp(item)">
									<image class="logo" :src="item.companyLogo" mode="aspectFill"></image>
									<view class="fboxCol flex1">
										<view class="fboxRow Ycenter">
											<view class="tit lh44 font30 color-ACB4C7">{{item.companyName}}</view>
											<!-- <view class="tit lh44 font30 color-ACB4C7" v-html="setKey(item.companyName)"></view> -->
											<text class="ml24 bwfont bw-qiye color-linear"></text>
										</view>
										<view class="fboxRow font26 color-6B707C lh38"> {{item.industryName}} {{item.staffSize}}</view>
										<view class="fboxRow color-ACB4C7 mt16 font26 lh38 " v-if="item.companyJonNameList">
											<view class="flex1 font-ell1">{{String(item.companyJonNameList)}} 等职位</view>
											<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
										</view>
										<view class="fboxRow color-ACB4C7 mt16 font26 lh38" v-else>
											<view class="flex1 font-ell1">暂无职位</view>
											<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<RecruitmentItem :innerData="item" />
							</template>
						</view>
						<view class="not-item">
							<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
						</view>
					</view>
					<template v-if="listConfig.loading == 'list-not'">
						<NotEmpty text="未搜索到相关数据" :height="scrollHeight" />
					</template>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {searchHint, companySearch, jobSearch} from '@/api/recruit.js';
	import {listMixins} from '../common/list.mixins.js';
	import RecruitmentItem from '@/components/card/recruitment-item.vue';
	import Tags from '../components/tags.vue';
	import NotEmpty from '@/components/not-index/not-empty.vue';
	export default {
		mixins: [listMixins],
		components:{
			RecruitmentItem,
			Tags,
			NotEmpty
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				actionList:[{
					value: 1,
                    label: '搜职位',
                }, {
					value: 2,
                    label: '搜企业',
                }],
				actionIndex: 0,
				listHistory: [],
				listKey: [],
				keywords: '',
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				step: 0,
				searchTypes: [],
				scrollTop: 0,
				scrollHeight: 0,
			}
		},
		onLoad() {
			this.getInit()
		},
		onReady() {
			console.log('onReady');
			this.getHeight('.head-custom-wrap,.search-box')
		},
		methods: {
			actionClick(e){
				this.actionIndex = 0
				this.step = 0
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.keywords = ''
				this.listKey = []
				this.listData = []
			},
			getInit(){
				let value = uni.getStorageSync('searchHistory')
				if (typeof(value) != "string") {
					this.listHistory = value
				}
			},
			setKey(val){
				console.log(val)
				const index = val.includes(this.keywords)
				const indexList = val.split(this.keywords)
				const text = indexList[0]+`<text style="color:#E8CDA7">${this.keywords}</text>`+ (indexList[1] || '')
				console.log(index, indexList)
				return text
			},
			tagClick(e){
				this.keywords = e
				this.keySearch()
			},
			searchChange(){
				this.step = 1
				const key = this.keywords
				let text = ''
				this.searchTypes.filter(item=>{
					if(item == 1){
						text += ' 职位'
					}
					if(item == 2){
						text += ' 公司'
					}
				})
				this.keywords = key+ text
				this.listKey = []
			},
			keySearch(){
				if(this.keywords){
					this.getSearch()
				}else{
					this.listConfig = {
						current: 1,
						size: 20,
						count: 0,
						loading: 'loading'
					}
					this.step = 0
					this.listData = []
				}
			},
			delSearch(){
				this.keywords = ''
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.step = 0
				this.listData = []
				this.listKey = []
			},
			setHistory(type, key){
				if(type == 'add'){
					if(!this.listHistory.includes(key)){
						if(this.listHistory.length < 10){
							this.listHistory.unshift(key)
						}else{
							this.listHistory.pop()
							this.listHistory.unshift(key)
						}
					}
				}else{
					this.listHistory = []
				}
				uni.setStorageSync('searchHistory',this.listHistory)
			},
			getSearch(){
				this.step = 1
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.listKey = []
				searchHint({keyword: this.keywords}).then(res=>{
					res.data.filter(item=>{
						const val = item.searchHint
						const indexList = val.split(this.keywords)
						console.log(indexList)
						let text = ''
						if(indexList.length == 1){
							text = `<text style="color:#E8CDA7">${this.keywords}</text>`
						}else if(indexList.length){
							text = indexList[0]+`<text style="color:#E8CDA7">${this.keywords}</text>`+ (indexList[1] || '')
						}else{
							text = item.searchHint
						}
						item.searchTxt = text
					})
					this.listKey = res.data			
					if(!res.data.length){
						this.listConfig.loading = 'list-not'
					}
				})
			},
			keyEnterSearch(e){
				console.log(this.keywords)
				if(this.keywords){
					this.step = 2
					this.listConfig = {
						current: 1,
						size: 20,
						count: 0,
						loading: 'loading'
					}
					this.listData = []
					if(typeof(e) == 'object'){
						this.keywords = e.searchHint
						this.searchTypes = e.searchTypes
						this.actionIndex = e.searchTypes.includes(1) ? 1 : 2
						this.setHistory('add', e.searchHint)
					}else{
						this.keywords = this.keywords
						this.searchTypes = []
						this.setHistory('add', this.keywords)
					}
					this.getList()
				}else{
					this.step = 0
					this.actionIndex = 0
				}
			},
			getList(){
				const { current, size, loading} = this.listConfig
				const api = this.actionIndex == 2 ? companySearch : jobSearch
				api({current, size, keywords: this.keywords}).then(res=>{
					if(this.listData.length){
						this.listData = this.listData.concat(res.data.list) 
					}else{
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			// onReachBottom(){
			// 	this.listMore()
			// },
			goApp(item){
				const data = { type: 'companyCard', companyId: item.companyId }
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			},
			upper: function(e) {
				console.log('upper',e)
			},
			lower: function(e) {
				console.log('lower',e)
				this.listMore()
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}
	.search-box{padding-bottom: 8rpx;}
	.search-inner{ position: relative; margin: 0 auto; width: 670rpx;height: 72rpx;background: var(--searchViewBackColor);border-radius: 12rpx;}
	.search-box .line{ margin-right: 16rpx; width: 2rpx;height: 30rpx;background: #6B707C;}
	.search-box .select{padding: 0 24rpx;}
	.search-box .input{padding: 0 16rpx;}
	.search-box .uni-input{ padding: 0 12rpx; font-size: 26rpx}
	.search-box .btn{width: 116rpx;height: 72rpx;border-radius: 0 12rpx 12rpx 0 ;color: var(--contentBgImageTitleColor);background: var(--contentSearchTitleColor);}
	.search-tag{padding: 0 12rpx;}
	.mr12{margin-right: 12rpx;}
	.list-history{padding: 40rpx 40rpx 0;}
	.list-key{padding: 40rpx 40rpx 0;}
	.list-key .item{padding: 16rpx 0;}
	.list-key .tit{margin: 0 8rpx 0 16rpx;}
	.list-key .label{ margin-left: 24rpx; width: 60rpx;height: 36rpx;border-radius: 4rpx;background-color: var(--buttonOutlineOneColor);color:var(--contentBgImageTitleColor)}
	.list{padding: 8rpx 0 0 40rpx;}
	.company-item{ padding: 32rpx 40rpx 32rpx 0; border-bottom: 1rpx solid #1F232F;}
	.company-item .logo{ margin-right: 24rpx; width: 100rpx;height: 100rpx;border-radius: 12rpx;}
	.company-item .icon{margin-left: 8rpx; width:32rpx;height: 32rpx;}
	.not-item{padding: 0 0 32rpx 0;}
</style>
